<template>
    <div class="box">
      <div class="content">
        <!-- 查询部分 -->
        <div class="search">
          <div class="search_left">
            <el-form :model="queryParams" ref="queryForm" :rules="rules" :inline="true" label-width="75px">
              <el-form-item label="出发地" prop="departure">
                <el-input
                  v-model="queryParams.departure"
                  placeholder="请输入出发地"
                  clearable
                  size="small"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="目的地" prop="destination">
                <el-input
                  v-model="queryParams.destination"
                  placeholder="请输入目的地"
                  clearable
                  size="small"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="出发日" prop="departureDay">
                <el-date-picker 
                v-model="queryParams.departureDay" 
                type="date" 
                value-format="yyyy-MM-dd" 
                placeholder="请选择出发日">
                </el-date-picker>
              </el-form-item>
            </el-form>
          </div>
          <div class="search_btn">
            <el-radio-group v-model="queryParams.identity">
              <el-radio 
              v-for="item in identityArr"
              :key="item.type"
              :label="item.type"
              >{{item.name}}</el-radio>
            </el-radio-group>
            <el-button class="btn" type="warning" icon="el-icon-search" size="medium" @click="handleQuery">查询</el-button>
          </div>
        </div>
        <!-- 类型部分 -->
        <div class="type">
          <!-- 车次类型 -->
          <div class="type_item">
            <p>车次类型:</p>
            <el-checkbox-group v-model="queryParams.carType" @change="handleQuery">
              <el-checkbox 
              v-for="item in carTypeArr"
              :key="item.id"
              :value="item.id"
              :label="item.carName"
              
              ></el-checkbox>
            </el-checkbox-group>
          </div>
          <!-- 出发车站 -->
          <div class="type_item">
            <p>出发车站:</p>
            <el-checkbox-group v-model="queryParams.station" @change="handleQuery">
              <el-checkbox 
              v-for="item in stationArr"
              :key="item.id"
              :value="item.id"
              :label="item.area"
              ></el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <p class="text" v-if="bool">{{queryParams.departure}} --> {{queryParams.destination}}（7月12日  周二）共计{{list.length}}个车次</p>
        <!-- 列表部分 -->
        <div class="list">
          <el-table v-loading="loading" :data="list" height="600">
            <el-table-column label="车次" align="center" prop="a" />
            <el-table-column label="出发站" align="center" prop="b" />
            <el-table-column label="到达站" align="center" prop="c" />
            <el-table-column label="出发时间" align="center" prop="d" />
            <el-table-column label="到达时间" align="center" prop="e" />
            <el-table-column label="历时" align="center" prop="f" />
            <el-table-column label="商务座/特等座" align="center" prop="g" />
            <el-table-column label="一等座" align="center" prop="h" />
            <el-table-column label="二等座/二等包座" align="center" prop="i" />
            <el-table-column label="高级软卧" align="center" prop="j" />
            <el-table-column label="软卧一等卧" align="center" prop="k" />
            <el-table-column label="动卧" align="center" prop="l" />
            <el-table-column label="硬卧二等卧" align="center" prop="m" />
            <el-table-column label="软座" align="center" prop="n" />
            <el-table-column label="硬座" align="center" prop="o" />
            <el-table-column label="无座" align="center" prop="p" />
            <el-table-column label="其他" align="center" prop="q" />

            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="primary"
                  @click="reserve(scope.row)"
                >预约</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
          loading:false,
          // 判断文字是否出现
          bool:false,
          //查询条件
          queryParams:{
            departure:null,       //出发地
            destination:null,       //目的地
            departureDay:null,       //出发日
            identity:'1',       //普通/学生
            carType:[],       //车次类型
            station:[],     //出发车站
            
          },
          //车次类型 arr
          carTypeArr:[
            {
              carName:'GC-高铁/城际',
              id:'1',
            },
            {
              carName:'D-动车',
              id:'2',
            },
            {
              carName:'Z-直达',
              id:'3',
            },
            {
              carName:'T-特快',
              id:'4',
            },
            {
              carName:'K-快速',
              id:'5',
            },
            {
              carName:'其他',
              id:'6',
            },
          ],
          //普通/学生 arr
          identityArr:[
            {
              name:'普通',
              type:'1',
            },
            {
              name:'学生',
              type:'2',
            },
          ],
          //出发车站 arr
          stationArr:[
            {
              area:'某城市',
              id:'1',
            },
            {
              area:'某城市北',
              id:'2',
            },
            {
              area:'某城市南',
              id:'3',
            },
            {
              area:'某城市东',
              id:'4',
            },
            {
              area:'某城市西',
              id:'5',
            },
          ],
          rules:{
            departure: [
                { required: true, message: "请输入出发地", trigger: "blur" }
            ],
            destination: [
                { required: true, message: "请输入目的地", trigger: "blur" }
            ],
            departureDay: [
                { required: true, message: "请选择出发日", trigger: "blur" }
            ],
          },
          // 真数据
          list:[

          ],
          // 假数据，后期删除
          fakeData:[
            {
              a:'K856',
              b:'西安',
              c:'大清',
              d:'12:00',
              e:'16:23',
              f:'04:23',
              g:'5($12)',
              h:'6($12)',
              i:'7($12)',
              j:'8($12)',
              k:'9($12)',
              l:'10($12)',
              m:'11($12)',
              n:'12($12)',
              o:'13($12)',
              p:'14($12)',
              q:'15($12)',
            },
            {
              a:'K857',
              b:'西安',
              c:'大清',
              d:'12:00',
              e:'16:23',
              f:'04:23',
              g:'5($12)',
              h:'6($12)',
              i:'7($12)',
              j:'8($12)',
              k:'9($12)',
              l:'10($12)',
              m:'11($12)',
              n:'12($12)',
              o:'13($12)',
              p:'14($12)',
              q:'15($12)',
            },
            {
              a:'K858',
              b:'西安',
              c:'大清',
              d:'12:00',
              e:'16:23',
              f:'04:23',
              g:'5($12)',
              h:'6($12)',
              i:'7($12)',
              j:'8($12)',
              k:'9($12)',
              l:'10($12)',
              m:'11($12)',
              n:'12($12)',
              o:'13($12)',
              p:'14($12)',
              q:'15($12)',
            },
          ],
        }
    },
    created(){
      //默认显示当天日期
      this.getNowTime()
    },
    methods:{
      //在此请求所有字典   如车次类型/普通/学生/出发车站    放进对应的arr   carTypeArr/identityArr/stationArr

      // 去预约  row为当前行对象
      reserve(row){

      },
      //默认显示当天日期
      getNowTime() {
          var now = new Date();
          var year = now.getFullYear(); //得到年份
          var month = now.getMonth(); //得到月份
          var date = now.getDate(); //得到日期
          month = month + 1;
          month = month.toString().padStart(2, "0");
          date = date.toString().padStart(2, "0");
          var defaultDate = `${year}-${month}-${date}`;
          this.$set(this.queryParams, "departureDay", defaultDate);
      },
      //点击查询
      handleQuery(){
        this.$refs["queryForm"].validate(valid => {
            if (valid) {
              this.bool = true  //  这个不用管   放着就好   有用
              this.loading = true    //loading   请求结束后改为false
              // 此处调取接口 传入this.queryParams  queryParams为所有查询条件 将数据放入list  
              // 定时器为模仿请求感觉   写接口去掉
              setTimeout(() => {
                this.list = this.fakeData   //拿到数据放入
                this.loading = false    //清除loading
              }, 3000);
            }
        });
      }
    }
}
</script>

<style scoped>
.box{
  width: 100%;
  display: flex;
  justify-content: center;
}
.content{
  width: 85%;
}
.search{
  width: 94%;
  padding: 10px 3%;
  display: flex;
  align-items: center;
  background: #eef1f8;
  border: 1px solid #298cce;
  border-radius: 3px;
}
.search_left{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: 40px;
  padding: 20px 0;
}
.search_left /deep/ .el-form{
  display: flex;
  align-items: center;
}
.search_left /deep/ .el-form-item{
  margin: 0;
}
.search_btn{
  height: 80px;
  padding-left: 30px;
  border-left: 1px solid #298cce;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.btn{
  margin-left: 20px;
}
.type{
  width: 94%;
  padding: 10px 3%;
  display: flex;
  flex-direction: column;
  background: #eef1f8;
  border: 1px solid #298cce;
  border-radius: 3px;
  margin: 30px 0;
}
.type_item{
  display: flex;
  align-items: center;
}
.type_item p{
  font-size: 16px;
  margin-right: 10px;
}
.list /deep/ .el-table th.el-table__cell.is-leaf{
    background: #298cce;
    color: white;
}
.text{
  font-size: 16px;
  float: left;
}
</style>